<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TCP 连接管理 - Tiny 框架</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .card {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }
        
        .btn {
            display: inline-block;
            background-color: #0066cc;
            color: white;
            padding: 8px 15px;
            text-decoration: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            border: none;
        }
        
        .btn:hover {
            background-color: #0055b3;
        }
        
        .btn-danger {
            background-color: #dc3545;
        }
        
        .btn-danger:hover {
            background-color: #c82333;
        }
        
        #connectionList {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f5f5f5;
            min-height: 100px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        
        .form-group input, .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .connection-panel {
            display: none;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>TCP 连接管理</h1>
    
    <div class="card fade-in">
        <h2>TCP 连接列表</h2>
        <p>点击下面的按钮查看当前活跃的 TCP 连接：</p>
        <button class="btn" onclick="refreshConnections()">刷新连接列表</button>
        <div id="connectionList">
            <p>点击"刷新连接列表"按钮查看活跃连接...</p>
        </div>
    </div>
    
    <div class="card fade-in">
        <h2>TCP 客户端测试工具</h2>
        <p>要测试 TCP 服务器，请使用以下命令启动客户端：</p>
        <pre>mvn exec:java -Dexec.mainClass="com.benzhitech.tcp.TcpClient"</pre>
        <p>或者运行 TcpClient 类中的 main 方法。</p>
    </div>
    
    <div class="card fade-in connection-panel" id="sendMessagePanel">
        <h2>发送消息到 TCP 客户端</h2>
        <div class="form-group">
            <label for="connectionId">连接 ID：</label>
            <input type="text" id="connectionId" readonly>
        </div>
        <div class="form-group">
            <label for="messageContent">消息内容：</label>
            <textarea id="messageContent" rows="3" placeholder="输入要发送的消息..."></textarea>
        </div>
        <button class="btn" onclick="sendMessage()">发送消息</button>
        <button class="btn btn-danger" onclick="disconnectClient()">断开连接</button>
    </div>
    
    <div class="footer">
        <p>Tiny 框架 &copy; 2025 北芝科技</p>
        <p><a href="/static/index.html">返回首页</a></p>
    </div>
    
    <script>
        function refreshConnections() {
            fetch('/tcp/connections')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('connectionList').textContent = data;
                    
                    // 解析连接 ID
                    const lines = data.split('\n');
                    const connectionIds = [];
                    
                    for (let i = 0; i < lines.length; i++) {
                        const line = lines[i].trim();
                        if (line.startsWith('- ')) {
                            const connectionId = line.substring(2);
                            connectionIds.push(connectionId);
                        }
                    }
                    
                    // 如果有连接，显示发送消息面板
                    if (connectionIds.length > 0) {
                        document.getElementById('sendMessagePanel').style.display = 'block';
                        document.getElementById('connectionId').value = connectionIds[0]; // 默认选择第一个连接
                    } else {
                        document.getElementById('sendMessagePanel').style.display = 'none';
                    }
                })
                .catch(error => {
                    document.getElementById('connectionList').textContent = '获取连接列表失败: ' + error.message;
                });
        }
        
        function sendMessage() {
            const connectionId = document.getElementById('connectionId').value;
            const message = document.getElementById('messageContent').value;
            
            if (!connectionId) {
                alert('请选择一个连接');
                return;
            }
            
            if (!message) {
                alert('请输入消息内容');
                return;
            }
            
            // 这里应该有一个 API 来发送消息到指定的连接
            // 由于我们还没有实现这个 API，这里只是显示一条提示信息
            alert(`消息将发送到连接 ${connectionId}:\n${message}`);
            
            // 消息发送后清空输入框
            document.getElementById('messageContent').value = '';
        }
        
        function disconnectClient() {
            const connectionId = document.getElementById('connectionId').value;
            
            if (!connectionId) {
                alert('请选择一个连接');
                return;
            }
            
            // 这里应该有一个 API 来断开指定的连接
            // 由于我们还没有实现这个 API，这里只是显示一条提示信息
            if (confirm(`确定要断开连接 ${connectionId} 吗？`)) {
                alert(`连接 ${connectionId} 将被断开`);
                
                // 断开连接后刷新连接列表
                setTimeout(refreshConnections, 500);
            }
        }
        
        // 页面加载完成后自动刷新连接列表
        document.addEventListener('DOMContentLoaded', refreshConnections);
    </script>
</body>
</html> 